<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <el-form :inline="true" class="demo-form-inline filter">
            <el-form-item label="客户名称">
                <el-select v-model="listQuery.fsiteNo" clearable filterable placeholder="请选择客户名称">
                    <el-option v-for="item in fsiteNoBelongOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="供应商名称">
                <el-select v-model="listQuery.fsupno" clearable filterable placeholder="请选择供应商名称">
                    <el-option v-for="item in getListfsupno" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="样品编号">
                <el-input v-model.trim="listQuery.fsampleno" clearable class="filter-item" placeholder="请输入客户名称" />
            </el-form-item>
            <el-form-item>
                <el-button round size="medium" class="filter-item"
                @click="getList"
                    :style="{ background: buttonColor.lookup, color: buttonColor.color }">查找</el-button>
                <el-button round size="medium" class="filter-item" @click="opencreate"
                    :style="{ background: buttonColor.add, color: buttonColor.color }">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询结果 -->
        <el-table :height="buttonColor.clientHeight" v-loading="listLoading" :data="list" stripe
            element-loading-text="正在查询中。。。" border fit highlight-current-row :header-cell-style="tableColor">
            <el-table-column align="center" :width="buttonColor.operationTwo" label="操作" class-name="small-padding">
                <template slot-scope="scope">
                    <div class="operationButton">
                        <div :style="{ color: buttonColor.edit, cursor: 'pointer' }" @click="Update(scope.row)">
                            <img src="../../../public/images/edit.png" />
                            编辑
                        </div>
                        <div :style="{ color: buttonColor.delete, cursor: 'pointer' }" @click="Delete(scope.row)">
                            <img src="../../../public/images/del.png" />
                            删除
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" width="80" label="序号" type="index" />
            <el-table-column align="left" label="样品编号" width="271" prop="fsampleno" />
            <el-table-column align="left" :formatter="formatfsupno" label="供应商" prop="fsupno" />
            <el-table-column align="left" label="质检费用" prop="fbuyprice" />
            <el-table-column align="left" label="客户样品码" prop="fcustno" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
        <!-- 新增修改 -->
        <el-dialog :close-on-click-modal="false" width="450px" :before-close="handleClose" :visible.sync="dialogFormVisible">
            <template slot="title">
                <div :style="exportColor">物料分类</div>
            </template>
            <el-form ref="dataForm" :model="dataForm" label-position="left" label-width="90px">
                <el-form-item label="样品编号" prop="fsampleno">
                    <el-input v-model="dataForm.fsampleno" :disabled="modify==2"/>
                </el-form-item>
                <el-form-item  label="质检费用" prop="fbuyprice">
                    <el-input v-model="dataForm.fbuyprice" />
                </el-form-item>
                <el-form-item  label="客户样品码" prop="fcustno">
                    <el-input v-model="dataForm.fcustno" />
                </el-form-item>
                <el-form-item label="供应商编号" prop="fsupno">
                    <el-select v-model="dataForm.fsupno" clearable filterable placeholder="请选择供应商名称">
                        <el-option v-for="item in getListfsupno" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button :style="{ background: buttonColor.cancel, color: buttonColor.colorone }" round
                   @click="handleClose" size="medium">取消</el-button>
                <el-button :style="{ background: buttonColor.confirm, color: buttonColor.color }" round
                   @click="UpdateorCreate" size="medium">{{modify==1?'新增':'修改'}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { tableColor, titleColor, exportColor, buttonColor } from '@/filters/index'
import { fsiteOptionsByLevel, getListArea, uploadPath2 } from '@/api/area'
import {create,list,update,Delete} from "@/api/sample/unit"
import Pagination from '@/components/Pagination'
export default {
    name: 'unit',
    components: { Pagination },
    data() {
        return {
            tableColor,
            buttonColor,
            exportColor,
            modify:1,
            listLoading: false,
            fsiteNoBelongOptions: [],
            getListfsupno: [],
            list: [],
            dialogFormVisible: false,
            rules:{
                fbuyprice:[{required: true, message: '请输入', trigger: 'blur'}],
                fcustno:[{required: true, message: '请输入', trigger: 'blur'}],
                fsampleno:[{required: true, message: '请输入', trigger: 'blur'}],
                fsupno:[{required: true, message: '请输入', trigger: 'blur'}]
            },
            total: 0,
            listQuery: {
                page: 1,
                limit: 20,
                fsiteNo: this.$store.state.user.fsiteNo,
                fsupno: undefined,
                fsampleno: undefined
            },
            dataForm: {
                fsiteNo: undefined,
                fbuyprice: 0,
                fcustno: undefined,
                fsampleno: undefined,
                fsiteNo: undefined,
                fsupno: undefined
            }
        }
    },
    created() {
        this.getcustom();
        this.GetListArea();
        this.getList();
    },
    methods: {
        //列表
        getList() {
            list(this.listQuery)
            .then(res=>{
                this.list = res.data.data.list
                this.total = res.data.data.total
            })
        },
        //客户列表
        getcustom() {
            fsiteOptionsByLevel(3)
                .then(response => {
                    this.fsiteNoBelongOptions = response.data.data.list
                })
                .catch(() => {
                    this.fsiteNoBelongOptions = []
                })
        },
        //供应商
        GetListArea() {
            getListArea({ flag: 6, arg1: this.$store.state.user.fsiteNo })
                .then(response => {
                    this.getListfsupno = response.data.data.list
                })
                .catch(() => {
                    this.getListfsupno = []
                })
        },
        //点击编辑
        Update(row){
            this.$nextTick(()=>{
                this.dataForm.fsiteNo=this.$store.state.user.fsiteNo;
                this.modify=2;
                this.dataForm.fbuyprice=row.fbuyprice;
                this.dataForm.fsupno=row.fsupno;
                this.dataForm.fsampleno=row.fsampleno;
                this.dataForm.fcustno=row.fcustno;
                this.dialogFormVisible = true;
            })
        },
        //关闭弹框
        handleClose() {
            this.dialogFormVisible = false;
            this.$refs['dataForm'].resetFields();
        },
        //点击新增
        opencreate() {
            this.dataForm.fsiteNo=this.$store.state.user.fsiteNo;
            this.dialogFormVisible = true;
            this.modify=1;
        },
        //新增、修改
        UpdateorCreate(){
            this.$refs['dataForm'].validate((valid) => {
                if(valid)
                {
                    var formMethod=this.modify==1?create:update;
                    formMethod(this.dataForm)
                    .then(res=>{
                        this.$notify.success({
                        title: '成功',
                        message: '存储资料成功'
                        })
                        this.dialogFormVisible = false;
                        this.getList();
                    })
                    .catch(res=>{
                        this.$notify.error({
                        title: '失败',
                        message: '存储资料成功'
                        })
                    })
                }
            })
        },
        //删除
        Delete(row){
            Delete(row).then((res)=>{
                this.$notify.success({
                  title: '成功',
                  message: '删除资料成功'
                })
                this.getList();
            })
            .catch(res=>{
                this.$notify.error({
                  title: '失败',
                  message: '删除资料失败'
                })
            })
        },
        // 供应商
      formatfsupno: function(row, column) {
        if (this.getListfsupno.length > 0) {
          for (let i = 0; i < this.getListfsupno.length; i++) {
            if (row.fsupno === this.getListfsupno[i].value) {
              return this.getListfsupno[i].label
            }
          }
          return ''
        } else {
          return ''
        }
      },
    }
}
</script>
  